<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>动态数据</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <link rel="stylesheet" th:href="@{/css/font.css}"/>
        <link rel="stylesheet" th:href="@{/css/xadmin.css}"/>

        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
        <script type="text/javascript" th:src="@{/js/xcity.js}"></script>

        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">动态表格</a>
                <a><cite>动态表格</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-form-item x-city" id="dstart">
                                    <label class="layui-form-label">城市联动</label>
                                    <div class="layui-input-inline">
                                        <select name="province" lay-filter="province" id="province">
                                            <option value="0">请选择省</option>
                                            <option th:each="item: ${provinceList}" th:value="${item.id}" th:text="${item.name}"></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="city" lay-filter="city" id="city">
                                            <option value="0">请选择市</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="area" lay-filter="area" id="area">
                                            <option value="0">请选择县/区</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                            <i class="layui-icon">&#xe615;</i></button>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-table" lay-data="{url:'/data/table/data',page:true,toolbar: '#toolbar',id:'test'}" lay-filter="test">
                                <thead>
                                <tr>
                                    <th lay-data="{type:'checkbox'}">ID</th>
                                    <th lay-data="{field:'id', sort: true}">ID</th>
                                    <th lay-data="{field:'name', sort: true, edit: 'text'}">用户名</th>
                                    <th lay-data="{field:'sex', sort: true, edit: 'text'}">性别</th>
                                    <th lay-data="{field:'time', sort: true, edit: 'text'}">时间</th>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/html" id="toolbar">
            <div class = "layui-btn-container" >
                <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >
                <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
            </div >
        </script>
        <script>
            layui.use('laydate', function() {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                });

            });
        </script>
        <script>
            layui.use('table', function() {
                var table = layui.table;

                //监听单元格编辑(修改功能)
                table.on('edit(test)',
                    function(obj) {
                        var value = obj.value, //得到修改后的值
                            data = obj.data, //得到所在行所有键值
                            field = obj.field; //得到字段
                        layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                    });

                //头工具栏事件
                table.on('toolbar(test)', function(obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;
                    };
                });
            });
        </script>

        <script>
            layui.use(['form','code'], function(){
                form = layui.form;
                layui.code();

                form.on('select(province)', function(data){
                    var pId=data.value;
                    if (pId!=0){
                        $.get("/city/list/"+pId,function (list) {
                            $("#city").html("");
                            $("#city").append("<option value=\"0\">请选择市</option>");
                            for (var i=0;i<list.length;i++){
                                $("#city").append("<option value=\""+list[i].id+"\">"+list[i].name+"</option>");
                            }

                            $("#area").html("");
                            $("#area").append("<option value=\"0\">请选择县/区</option>");

                            layui.form.render("select");
                        });
                    }else{
                        $("#city").html("");
                        $("#city").append("<option value=\"0\">请选择市</option>");

                        $("#area").html("");
                        $("#area").append("<option value=\"0\">请选择县/区</option>");

                        layui.form.render("select");
                    }

                });

                form.on('select(city)', function(data){
                    var pId=data.value;
                    if (pId!=0){
                        $.get("/districts/list/"+pId,function (list) {
                            $("#area").html("");
                            $("#area").append("<option value=\"0\">请选择县/区</option>");
                            for (var i=0;i<list.length;i++){
                                $("#area").append("<option value=\""+list[i].id+"\">"+list[i].name+"</option>");
                            }
                            layui.form.render("select");
                        });
                    }else{
                        $("#area").html("");
                        $("#area").append("<option value=\"0\">请选择县/区</option>");
                        layui.form.render("select");
                    }

                });
            });

        </script>
    </body>
</html>